<template>
  <div>
    <el-card shadow="never" style="margin: 30px">
      <div slot="header">
        <span>模糊查询</span>
      </div>
      <el-row :gutter="24">
        <el-form
          :model="seach"
          ref="form"
          label-width="80px"
          :inline="false"
          size="normal"
        >
          <el-col :span="8" :offset="0">
            <el-form-item label="类名查询">
              <el-input
                v-model="seach.name"
                placeholder="请输入类名"
                size="normal"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="16">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即查询</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>

    <el-card shadow="hover" style="margin: 30px">
      <div slot="header">
        <el-upload
          class="upload-demo"
          :action="host + '/admin/xy/upload/uploadImg'"
          :on-success="onsuccess"
          :headers="headers"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </div>
      <el-row>
        <el-col :span="4.8" v-for="item in imglist" :key="item.id">
          <div class="picbox">
            <img
              class="picture"
              :src="host + '/' + item.dir + '/' + item.fileName"
              alt=""
            />
            <div class="title">
              <input
                type="text"
                v-model="item.title"
                v-if="edit == item.id"
                @keyup.enter="doUpload(item.id, item.title)"
                @keyup.esc="cancleEdis()"
              />
              <span v-if="edit !== item.id" @click="goedit(item.id)">{{
                item.title ? item.title : "未定义"
              }}</span>
              <el-button
                type="primary"
                size="mini"
                style="margin-left: 30px"
                @click="del(item.id)"
                >删除</el-button
              >
            </div>
          </div>
        </el-col>
      </el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Page.start"
        :page-sizes="Page.sizes"
        :page-size="Page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Page.totalCount"
        style="text-align: right; margin-top: 30px"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import ImgApi from "@/api/img/index";
import SettingsF from "@/settings";
import { getToken } from "@/utils/mysuth";
import _ from "lodash";
export default {
  name: "imgss",
  data() {
    return {
      host: SettingsF.host,
      seach: {},
      imglist: [],
      edit: "",
      Page: {
        start: 1,
        limit: 10,
        sizes: [10, 20, 30, 40],
        totalCount: 0,
      },
    };
  },
  created() {
    this.getimglist();
  },
  computed: {
    headers() {
      return {
        "bufan-token": getToken(),
      };
    },
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.Page.limit = val;
      this.getimglist();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.Page.start = val;
      this.getimglist();
      console.log(111);
    },
    getimglist() {
      var params = {
        start: this.Page.start,
        limit: this.Page.limit,
        title: this.seach.name,
      };
      params = _.pickBy(params, (item) => item);
      ImgApi.uploadlist(params).then((res) => {
        console.log(res);
        this.imglist = res.data.list;
        this.Page.totalCount = res.data.totalRow;
      });
    },
    onSubmit() {
      this.getimglist();
    },
    onsuccess() {
      this.getimglist();
    },
    del(id) {
      ImgApi.uploaddel({ id }).then((res) => {
        this.$message.success("删除成功");
        this.getimglist();
      });
    },
    goedit(id) {
      this.edit = id;
    },
    doUpload(id, title) {
      ImgApi.updateTitle({ id, title }).then((res) => {
        if (res.code == "success") {
          this.$message.success("保存成功");
          this.edit = "";
          this.getimglist();
        } else {
          this.$message.error("保存失败");
        }
      });
    },
    cancleEdis() {
      this.edit = "";
    },
  },
};
</script>
<style scoped  lang='scss'>
.picbox {
  height: 220px;
  margin: 30px;
  .picture {
    width: 200px;
    height: 180px;
  }
  .title {
    width: 200px;
    height: 40px;
    text-align: center;
  }
}
</style>